<template>
  <el-row>
    <el-col>
      <el-form :inline="true" :model="queryParams" ref="inlineForm" size="small">
        <el-form-item label="请求方式">
          <el-select v-model="queryParams.requestMethod" placeholder="请求方式">
            <el-option label="全部" value="-1"/>
            <el-option label="GET" value="GET"/>
            <el-option label="POST" value="POST"/>
            <el-option label="PUT" value="PUT"/>
            <el-option label="DELETE" value="DELETE"/>
          </el-select>
        </el-form-item>
        <el-form-item label="等级">
          <el-select v-model="queryParams.level" placeholder="等级">
            <el-option label="全部" value="-1"/>
            <el-option label="1" value="1"/>
            <el-option label="2" value="2"/>
            <el-option label="3" value="3"/>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryParams.resultStatus" placeholder="状态">
            <el-option label="全部" value="-1"/>
            <el-option label="成功" value="1"/>
            <el-option label="失败" value="2"/>
            <el-option label="未知" value="0"/>
          </el-select>
        </el-form-item>
        <el-form-item label="操作时间">
          <el-date-picker
                  v-model="queryParams.periodOfTime"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="success" size="mini" @click="clickSelect">搜索</el-button>
          <el-button size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col style="min-height: 500px">
      <vxe-table
              :data="tableData"
              :row-config="{isHover: true}"
              :header-cell-style="{'text-align':'left'}">
        <vxe-column type="checkbox" width="50px"></vxe-column>
        <vxe-column title="系统模块" field="moduleName"/>
        <vxe-column title="操作类型" field="chineseName"/>
        <vxe-column title="请求方式" field="requestMethod" width="90"/>
        <vxe-column title="等级" field="level" width="60"/>
        <vxe-column title="IP" field="visitIp"/>
        <vxe-column title="介质" field="visitBrowser"/>
        <vxe-column title="系统" field="visitOs"/>
        <vxe-column title="状态" field="resultStatus" :formatter="formatterResultStatus" width="60"/>
        <vxe-column title="日期" field="createTime"/>
      </vxe-table>
      <!-- 分页-->
      <p style="text-align: right">
        <vxe-pager
                :current-page="page.currentPage"
                :page-size="page.pageSize"
                :total="page.total"
                :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
                @page-change="handlePageChange">1
        </vxe-pager>
      </p>
    </el-col>
  </el-row>
</template>

<script>

  import {queryLogPage} from '@/api/operations-center/logs'

  export default {
    name: "OperlogList",
    data() {
      return {
        tableData: [],
        page: {
          currentPage: 1,
          pageSize: 10,
          total: 0
        },
        queryParams: {
          requestMethod: '-1',
          level: '-1',
          resultStatus: '-1',
          periodOfTime: []
        }
      }
    },
    methods: {
      /**
       * {点击查询触发}
       *
       * @author: 宋康
       * @date: 2022/8/23 14:06
       */
      clickSelect() {
        this.page.currentPage = 1;
        this.queryLogs();
      },
      /**
       * {重置查询}
       *
       * @author: 宋康
       * @date: 2022/8/23 14:08
       */
      resetQuery() {
        this.queryParams = {
          requestMethod: '-1',
          level: '-1',
          resultStatus: '-1',
          periodOfTime: []
        }
        this.queryLogs();
      },
      /**
       * {点击分页触发}
       *
       * @author: 宋康
       * @date: 2022/8/23 14:06
       */
      handlePageChange({currentPage, pageSize}) {
        this.page.currentPage = currentPage
        this.page.pageSize = pageSize
        this.queryLogs();
      },
      /**
       * {查询日志分页}
       *
       * @author: 宋康
       * @date: 2022/8/23 11:06
       */
      queryLogs() {
        let options = {
          ...this.queryParams,
          startDate: this.queryParams.periodOfTime[0] || '',
          endDate: this.queryParams.periodOfTime[1] || ''
        }
        queryLogPage(this.page.currentPage, this.page.pageSize, options).then(res => {
          if (res.status) {
            let data = res.data;
            this.tableData = data.records;
            this.page.total = data.total;
          }
        })
      },
      /**
       * {格式化访问状态}
       *
       * @author: 宋康
       * @date: 2022/8/23 11:18
       */
      formatterResultStatus({cellValue}) {
        switch (cellValue) {
          case '1':
            return '成功';
          case '2':
            return '失败';
          default:
            return '未知';
        }
      },
    },
    mounted() {
      this.queryLogs();
    }
  }
</script>

<style lang="scss" scoped>

</style>